<template>
	<view class="emotion-box">
		<swiper class="swiper" disable-programmatic-animation="true" indicator-dots="true" style="height: 360rpx;">
			<swiper-item class="emotion-box-line">
				<view v-for="(line, i) in list1" v-bind:key="i">
					<view v-for="(im, ix) in line" v-bind:key="ix" class="swiper-item emotion-item"
						:style="{width:img_width+'rpx'}" @click="clickHandler(im)">
						<rich-text :nodes="emotion(im)"></rich-text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		getName
	} from './utils'
	export default {
		props: {

		},

		data() {
			return {
				// 画矩阵
				list1: [
					[1, 2, 3],
					[4, 5, 6],
					[7, 8, 9],
					[10, 11, 12],
					[13, 14, 15],
					[16, 17, 18],
				],

				item: [],
				img_width: 60
			}
		},
		mounted() {

		},
		methods: {

			clickHandler(i) {
				console.log(i, 46);
				const name = getName(i)
				let emotion = `[${name}]`
				this.$emit('emotion', emotion);
				this.$nextTick(() => {
					this.$emit('closePopup')
				})
			},
			emotion(res) {
				const list = Array.from({
					length: 100
				}, (v, k) => k)
				let index = list.indexOf(res)
				//  请将此处地址更换为自己服务器的地址
				return `<img class="imageBox" style="width:30px;height:30px;" src="https://file.mjcelaine.top/biaoqingbao/demo/${index}.png"    />`
			}
		}
	}
</script>

<style scoped>
	.imageBox {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		overflow: hidden;
		display: inline-block;
	}

	.emotion-box {

		margin: 0 auto;

		width: 100%;
		box-sizing: border-box;
		padding-top: 8upx;
		padding-bottom: 15upx;
		overflow: hidden;
		background: white;
	}

	.emotion-box-line {
		display: flex;
	}

	.emotion-item {
		flex: 1;
		text-align: center;
		cursor: pointer;
		padding: 30upx;
	}
</style>
